<template id="tabbar-1" style="margin: 40px 0 0px 0">
  <view class="index-content" v-if="showPage">  
	<!-- 导航栏 -->
	<view ref="tabbar1" id="tab-bar" class="tab-bar" >
		<view class="tab-bar-item logo">XX</view>
		
		<!-- <view class="tab-bar-item item4" @click="showSearchView"><i class="iconfont icon-sousuo"></i></view> -->
		<input class="input-search" type="text" v-model="searchValue" />
			<icon class="icon-search" type="search" size="23" @click="songSearch"/>
	</view>

	<!-- banner轮播图 -->
	<swiper :indicator-dots="true" :autoplay="true" :circular="true" style="padding-top: 110rpx;" class="swiper-box">
		<swiper-item v-for="(item, index) in bannerData" :key="index">
			<image :src="item.imageUrl" mode=""></image>
		</swiper-item>
	</swiper>
	<!-- 分割线 -->
	<div style="height: 1px; background-color: #dddddd; margin-top: 20rpx;"></div>
	<tuijianGedan :pageData="pageData"></tuijianGedan>

  </view>
</template>

<script>
	import app from '../../../App.vue'
	import tuijianGedan from '@/components/tuijian-gedan/tuijian-gedan.vue'
	const iac = 1;
  export default {
    data() {
      return {
		bannerData: [],
		geDanList: [],
		pageData: [],
		searchValue: '让你爱上我要多久',
		player: iac,
		showPage: false,
		// scrollTop: 0,
		// loadFlag: true
      }
    },
	components: {
		tuijianGedan
	},
    onLoad() {
			this.getBanner()
			this.getHomePage()
		
		// iac.src = this.$store.state.song.url
		// iac.play()
	},
	onReady() {
		setTimeout(()=>{
			this.showPage = true
		}, 2000)
		
	},
	computed:{
		// 正在播放的歌曲
		// nowSong(){
		// 	// 用计算属性实现两个页面的控制。后续看能不能放到vuex中
		// 	// iac.src = this.$store.state.song.url
		// 	// if(this.$store.state.song.playState)iac.play()
		// 	// else{iac.pause()}`
		// 	// console.log(this.$store.state.song.playState,'index')
		// 	return this.$store.getters.songData
		// },
		// nowSearchList(){
		// 	return this.searchResult.slice((this.pageNum-1)*9, this.pageNum*9)
		// },
		// nextPlay(){
		// 	return this.$store.getters.nextPlayData
		// }
		
	},
    methods: {
		 
		  getBanner(){
			  uni.request({
			  	url: 'http://119.3.174.206:3000/banner',
				method: 'GET',
				success: async(res)=> {
					// console.log(res)
					if(res.statusCode != 200)return console.log("banner数据获取失败")
					this.bannerData = await res.data.banners
				},
				fail(msg) {
					console.log(msg)
				},
				withCredentials: true,
				xhrFields: { withCredentials: true }
				
			  })
		  },
		  getHomePage(){
			  uni.request({
			  	url: 'http://119.3.174.206:3000/homepage/block/page',
				success: async(res) => {
					this.pageData = await res.data.data.blocks;
					console.log("pageData", this.pageData.splice(0,1));
					console.log(this.pageData)
				},
				withCredentials: true,
				xhrFields: { withCredentials: true }
			  })
		  },

		  // 进入歌单列表
		  goGeDanDetail(resource){
			  // console.log(resource.resourceId)
			  uni.navigateTo({
			  	url: '../../other/gedanDetail/gedanDetail?resourceId='+ resource.resourceId,
				animationType: 'slide-in-right',
				animationDuration: 200
			  })
		  },
		  // 点击了分享按钮
		  share(){
			  console.log('点击了share')
		  },
		  // 点击播放歌曲,优化了下代码结构
		  // play(msg){
			 //  this.nowSong.id = msg.resourceId? msg.resourceId:null || msg.id
			 //  // console.log(msg)
				//   // 获取音乐url
				//   uni.request({
				// 	url: "http://119.3.174.206:3000/song/url?id=" + this.nowSong.id,
				// 	success: (res) => {
				// 		console.log(res)
				// 		if(!res.data.data[0].url)return console.log('权限不够')
				// 		this.nowSong.url = res.data.data[0].url
				// 		this.nowSong.playState = true
				// 		this.nowSong.image =  msg.uiElement?msg.uiElement.image.imageUrl:null || msg.artists[0].img1v1Url
				// 		this.nowSong.title =  msg.uiElement?msg.uiElement.mainTitle.title:null || msg.name
				// 		this.nowSong.author = msg.uiElement?msg.resourceExtInfo.artists[0].name:null || msg.artists[0].name
				// 		this.$store.commit('songChange', this.nowSong)
				// 		this.iac.src = this.nowSong.url
				// 		this.$iac.play()
				// 	}
				//   })
			  
		  // },
		  // 搜索框出现
		 //  showSearchView(){
			//   this.$refs.searchView.show()
		 //  },
		 //  hideSearchView(){
			//   this.$refs.searchView.hide()
		 //  },
		 //  songSearch(){
			//   if(!this.searchValue){
			// 	  this.searchValue2 = true
			// 	  return setTimeout(()=>{this.searchValue2 = false},2000)
			//   }
			//   uni.request({
			//   	url: 'http://119.3.174.206:3000/search?limit=100&keywords='+this.searchValue,
			// 	success: (res) => {
			// 		this.searchResult = res.data.result.songs
			// 		this.totalItems = this.searchResult.length
			// 		console.log(this.searchResult)
			// 	}
			//   })
		 //  },
		 //  test(msg){
			//   console.log(this.pageData)
		 //  },
		 //  goAd(){
			//   // uni.navigateTo({
			//   // 	url: 'https://jwgr2333.github.io'
			//   // })
			//   uni.showToast({
			//   	title: 'jwgr2333.github.io',
			// 	icon: 'none'
			//   })
		 //  },
		 // onPageChange(e) {
			//  // console.log(e)
			// this.pageNum = e.current // 页码
			// //   let type = e.type // 类型
		 // }
		      
			  
    }
  }
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
		margin-bottom: 40px;
	}
	.index-content {
		
	}
	
	.tab-bar {
		position: fixed;
		z-index: 8;
		display: flex;
		background-color: #fff;
		/* justify-content: end; */
		/* white-space: nowrap; */
		width: 100%;
		height: 100rpx;
		padding: 20rpx;
		padding-bottom: 0;
		box-sizing: border-box;
		justify-content: space-between;
	}
	.logo {
		margin-left: 20rpx;
		line-height: 66rpx;
		}
	.input-search {
		border: 1px solid #ccc; 
		width: 80%; 
		margin-left: 16rpx; 
		height: 30px;
		border-radius: 8rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
	}
	
	swiper {
		swiper-item {
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.nav {
		// display: flex;
		// justify-content: space-between;
		white-space: nowrap;
		// align-items: space-between;
		height: 120rpx;
		width: 100%;
		// background-color: yellow;
	}
	.nav-item {
		display: inline-block;
		// display: flex;
		// flex-direction: column;
		padding: 10rpx 0 0 16rpx;
		margin: 0 10rpx;
		width: 100rpx;
		height: 100%;
		.iconfont {
			margin-left: 10rpx;
			font-size: 60rpx;
			// text-align: center;
			align-items: center;
			color: red;
			
		}
		.nav-item-title {
			font-size: 20rpx;
			// transform:scale(0.9, 0.9)
		}
	}
	.jingxuan {
		margin-top: 14rpx;
		padding: 0 14rpx;
		.jingxuan-title {
			display: flex;
			justify-content: space-between;
			font-size: 30rpx;
			align-items: center;
			.title {font-size: 40rpx;}
			a {
				font-size: 20rpx; 
				line-height: 48rpx;
				border: 2rpx solid #ccc;
				padding: 0 10rpx;
				border-radius: 40rpx;
			}
		}
		.jingxuan-content {
			position: relative;
			margin-top: 10rpx;
			white-space: nowrap;
			width: 100%;
			height: 300rpx;
			// justify-content: space-between;
			// background-color: pink;
			
			.item {
				// top: 0;
				height: 100%;
				width: 30%;
				display: inline-block;
				// display: flex;
				margin-right: 30rpx;
				// background-color: yellow;
				// align-items: center;
				
				.xiex-image {
					height: 70%;
					width: 100%;
					border-radius: 20rpx;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
				}
				easy-loadimage {
					height: 70%;
					width: 100%;
					border-radius: 10rpx;
				}
				.describe {
					position: absolute;
					bottom: 0;
					width: 230rpx;
					height: 74rpx;
					font-size: 24rpx;
					white-space: normal;
					line-height: 40rpx;
				}
			}
		}
		.jingxuan2-content {
			margin-top: 10rpx;
			white-space: nowrap;
			width: 100%;
			height: 300rpx;
			// flex-direction: column;
			// justify-content: space-between;
			.item {
				width: 100%;
				display: inline-block;
				// margin-top: 20rpx;
				.item2 {
					display: flex;
					justify-content: space-between;
					padding: 0 10rpx 20rpx 0;
					font-size: 20rpx;
					.xiex-image {
						height: 84rpx;
						width: 84rpx;
						margin-right: 20rpx;
					}
					p {
						width: 30%;
						overflow: hidden;
					}
					.name {
						width: 30%;
						overflow: hidden;
					}
				}
			}
		}
	}
	.bottom-box{
		position: fixed;
		bottom: 0;
		padding: 5px 0 10px 0;
		width: 100%;
		height: 47px;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		.middle {
			transition: all linear 1s;
			
			position: relative;
			view {
				transition: all linear .5s;
				width: 50px; height: 50px; background-color: #fff; border-radius: 50%; position: absolute; z-index: 3;
				transform: scale(1.6);
			}
		}
		.play {
			animation: xuanZhuan 3s linear infinite;
		}
		.pause {
			animation-play-state: paused;
		}
		@keyframes xuanZhuan {
		            0% {}
		
		
		            100% {
		              transform: rotate(360deg);
		            }
		        }
	}
	
	
	// 搜索组件
	.searchView{
		// 顶部盒子
		.search-top-box {
			margin-top: 40rpx;
			.iconfont {
				margin-left: 40rpx;
				font-size: 50rpx;
				line-height: 46rpx;
			}
			.search-input {
				width: 75%;
				margin: 0 auto;
				padding: 0 10rpx;
				border-bottom: 1rpx solid #ccc;
			}
		}
		// 中间广告
		.goods-recmd {
			margin: 20rpx 5%;
			// background-color: yellow;
			width: 90%;
			height: 100rpx;
			border-radius: 20rpx;
			a {
				width: 100%;
				height: 100%;
			}
		}
		// 历史
		.search-history {
			
		}
		// 热搜推荐
		.hot-search-recmd {
			
		}
		.search-result-box {
			position: relative;
			margin: 10rpx 5%;
			width: 90%;
			font-size: 20rpx;
			color: #777;
			.search-result-item {
				display: flex;
				justify-content: space-between;
				padding-top: 10rpx;
				height: 80rpx;
				// background-color: pink;
				.iconfont {
					line-height: 65rpx;
				}
			}
			.mask {
				position: absolute;
				// z-index: 10;
				opacity: 0;
				width: 100%;
				height: 100%;
				background-color: #ccc;
			}
			.mask:hover {
				animation: wave 1s linear;
			}
		}
	}
	
	@keyframes wave {
		0% {
			opacity: 0.5;
			background-color: #ccc;
		}
		100% {
			opacity: 0;
		}
	}
  
</style>
